<template>
    <div class="pagesCom">
      <div class="pages">
        <div class="fl">
          <!--第几页-->
          <span class="currentPage">第</span><span>{{currentPage}}</span><span>页</span>
          <!--共多少条-->
          <span class="num">共</span><span>{{total}}</span><span>条</span>
        </div>
        <Page :total="100" show-sizer :page-size="pageSize" :current="currentPage" @on-change="changePage" @on-page-size-change="changeSize"></Page>

      </div>
    </div>
</template>
<script>
    export default{
        name:"pages",
        data(){
            return {
              total:0,//总条数
              currentPage:1,//当前页
              pageTotal:1,//总页数
              pageSize:10,//默认每页显示数量
            }
        },
      methods:{
        //改变页数
        changePage: function (page) {
          this.currentPage=page;
//          this.invoiceData = this.invoiceTableData(this.inviceForm,this.currentPage,this.pageSize);
        },
        //改变每页显示多少条
        changeSize: function (pageSize) {
          this.currentPage=1;
          this.pageSize = pageSize;
          this.pageTotal=Math.ceil(this.total / this.pageSize);
//          this.invoiceData = this.invoiceTableData(this.inviceForm,this.currentPage,this.pageSize);
        }
      }
    }
</script>
<style>
  .pagesCom{
    position: relative;
    background: #fff;
    height: 50px;
  }
 .pagesCom .pages{
    height: 50px;
    line-height: 50px;
    text-align: right;
    color: #464c5b;
    font-size: 12px;
    padding-right: 20px;
    display: flex;
    position: absolute;
   right:20px;
  }
  .pages .ivu-page-options,.pages .num,.pages .ivu-page-next{margin-left: 10px }
  .pages .ivu-page-item-jump-next,.pages .ivu-page-item-jump-prev,.pages .ivu-page-item,.pages .ivu-page-prev i,.pages .ivu-page-next i{
    display: none;
  }
  .ivu-page-prev i,.ivu-page-next i{
    display: none;
  }
  .ivu-page-options{float: left;}
  .ivu-page-next, .ivu-page-prev{
    width: 50px;
    text-align: center;
    height:24px;
    line-height:24px;
    border:1px solid #464c5b;
    border-radius: 20px;
  }
   .ivu-page-prev{margin-right: 0}
  .ivu-select-selection{border:none;}
  .ivu-page-next:hover, .ivu-page-prev:hover{
    border-color:#464c5b;
  }
  .ivu-select-selection:hover,.ivu-select-visible .ivu-select-selection{
    border:none;
  }
  .ivu-select-visible .ivu-select-selection{
    box-shadow:none;
  }
  .ivu-select-item-selected, .ivu-select-item-selected:hover{
    background: #f5f7f9;
    color:#464c5b;
  }
  .ivu-page-prev{
    background: url("../assets/pages/prev01.png")no-repeat;
  }
  .ivu-page-prev:hover{
    background: url("../assets/pages/prev02.png")no-repeat;
  }
  .ivu-page-next{
    background: url("../assets/pages/next01.png")no-repeat;
  }
  .ivu-page-next:hover{
    background: url("../assets/pages/next02.png")no-repeat;
  }
</style>
